import {
    AfterViewInit,
    Component,
    ElementRef,
    Input,
    OnChanges,
    OnInit,
    Renderer2,
    SimpleChanges,
    ViewChild
} from '@angular/core';


@Component({
    selector: 'app-iframe-page',
    templateUrl: 'component.html',
    styleUrls: ['component.scss']
})
export class IframePageComponent implements AfterViewInit, OnChanges , OnInit{
    @Input() htmlCode = '等在加载》》》';
    @Input() width = 1920;
    @Input() height = 1080;
    @Input() auto = false;
    @ViewChild('fatherDiv') fatherDiv: ElementRef;
    @ViewChild('iframe') iframe: ElementRef;

    firstCompile = true;

    constructor(private el: ElementRef, private _renderer2: Renderer2) {
    }

    ngOnInit(): void {
    }


    ngOnChanges(changes: SimpleChanges): void {
        if (changes.hasOwnProperty('htmlCode') && !this.firstCompile) {
            this.compile();
        }
        if (changes.hasOwnProperty('height') || changes.hasOwnProperty('width') && !this.firstCompile){
            this.setDiv();
        }

    }

    ngAfterViewInit(): void {
        this.compile();
        this.firstCompile = false;
        //监听窗口变化
        this._renderer2.listen('window', 'resize', () => {
            this.compile();
        });
    }

    setDiv(){
        if (this.fatherDiv){
            if (this.auto){
                const parentWidth = this.el.nativeElement.parentElement.clientWidth ;
                const parentHeight = this.el.nativeElement.parentElement.clientHeight;
                if (parentWidth !== this.width || parentHeight !== this.height){
                    this.width = parentWidth ;
                    this.height = parentHeight;
                }
            }

            this.iframe.nativeElement.style.width = '1920px';
            this.iframe.nativeElement.style.height = '1080px';
            const scaleX = this.width / 1920;
            const scaleY = this.height / 1080;
            this.iframe.nativeElement.style.transform = 'scale(' + scaleX + ',' + scaleY + ')';
            this.fatherDiv.nativeElement.style.height =  this.height + 'px';
            this.fatherDiv.nativeElement.style.width =  this.width + 'px';
        }
    }

    compile(){
        this.setDiv();
        const iframe: HTMLIFrameElement = this.iframe.nativeElement;
        const iframeDoc = iframe.contentDocument;
        if (iframeDoc !== null) {
            // iframeDoc.documentElement.innerHTML = this.htmlCode;
            iframeDoc.open(); // 需要先调用 `open()`，打开“写”的开关
            iframeDoc.write(`<body style='margin:0;'>` + this.htmlCode + `</body>`);
            iframeDoc.close(); // 最后调用 `close()`，关闭“写”的开关
        }
    }

    // setBaseTag(){
    //     const iframeDocument = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow.document;
    //     // 创建 base 标签
    //     const baseTag = this.iframe.nativeElement.createElement('base');
    //     baseTag.href = 'http://maxiao.fun:8008/';
    //     // 将 base 标签插入到 head 中
    //     iframeDocument.head.appendChild(baseTag);
    // }
}
